<template>
  <div class="detail baseDetail">
    <div class="detail-content">
      <MenuLocation :title="'实践实训基地 / 详情'"></MenuLocation>
      <div class="detail-head">
        <div
          class="left-img"
          :style="{
            backgroundImage: 'url(' + detailInfo.trainingBaseCover + ')',
          }"
        ></div>
        <div class="center-img">
          <div
            class="img-el"
            v-for="(i, index) in detailInfo.imgList"
            :key="index"
            :style="{ backgroundImage: 'url(' + i + ')' }"
          ></div>
        </div>
        <div class="map">
          <div class="name-row">
            <div class="label">{{ detailInfo.typeName }}</div>
            <span>{{ detailInfo.name }}</span>
          </div>
          <div class="base-phone-row">
            <div class="phone">
              <span class="phone-label">基地电话</span>
              <img class="phone-icon" src="@/assets/base/phone.png" alt="" />
              <span class="num">{{ detailInfo.telephone }}</span>
            </div>
            <div @click="setMdStatus" class="collect">
              <Icon v-if="!mdStatus" type="md-star" color="#E9E9E9" size="16" />
              <Icon v-else type="md-star" color="#fdcd10" size="16" />
              <span>收藏</span>
            </div>
          </div>
          <div class="score-row">
            <div class="label-list">
              <div class="label">{{ detailInfo.typeName }}</div>
              <div class="label">{{ detailInfo.capacity }}人</div>
            </div>
            <div class="score-el">
              <span>{{
                Number(((detailInfo.grade * 10) / 10).toFixed(1))
              }}</span>
              <span>分</span>
              <Rate
                allow-half
                disabled
                :value="Number(detailInfo.grade)"
              ></Rate>
            </div>
          </div>
          <div class="location-info-row">
            <div class="location-info">
              <img
                class="location-icon"
                src="@/assets/base/location2.png"
                alt=""
              />
              <span>{{ detailInfo.siteAddress }}</span>
            </div>
            <!--<div class="to-view">查看地图</div>-->
          </div>
          <!--<div class="map-show"></div>-->
        </div>
      </div>
      <div class="detail-tabs">
        <div class="label">{{ name }}</div>
        <Tabs v-model="name" @on-click="changeTable">
          <Tab-Pane label="概览" name="概览">
            <div v-html="detailInfo.trainingBaseDetail"></div>
          </Tab-Pane>
          <Tab-Pane label="预约" name="预约" :disabled="isDisabled">
            <div class="appointment">
              <div class="date">
                <Radio-group
                  v-model="daySel"
                  style="margin-bottom: 5px"
                  @on-change="changeCurrent(item, index)"
                  type="button"
                  v-for="(item, index) in dateList"
                  :key="index"
                >
                  <Radio
                    :disabled="item.enable == '0'"
                    :label="item.dateMonthDay"
                    style="margin: 0 3px"
                  >
                    <span style="display: block">周{{ item.weekStr }}</span>
                    <span>{{ item.dateMonthDay }}</span>
                  </Radio>
                </Radio-group>
              </div>
              <div class="line"></div>
              <div class="time-list">
                <div
                  class="time-el"
                  :class="item.enable == '1' ? 'noActive' : ''"
                  v-for="(item, index) in timeList"
                  :key="index"
                  @click="item.enable == '0' ? chooseTime(item, index) : ''"
                >
                  <img class="clock" src="@/assets/base/clock.png" alt="" />
                  <span>{{ item.timeSlot || "" }}</span>
                  <img
                    class="choose-icon"
                    :src="
                      item.checked == true
                        ? require('@/assets/base/choosed.png')
                        : require('@/assets/base/choose.png')
                    "
                    alt=""
                  />
                </div>
              </div>
              <div class="price">
                <span v-if="detailInfo.isCharge == '1'"
                  >¥ {{ detailInfo.unitPrice }}/小时</span
                >
                <span v-else>免费</span>
                <div class="submit-btn" @click="appointmentHandle">
                  提交预约
                </div>
              </div>
            </div>
          </Tab-Pane>
          <Tab-Pane label="评价" name="评价">
            <div class="course-comment mt_20" v-if="pjList.length > 0">
              <div class="course-comment-top">
                <div class="score">{{ pjInfo.gradeAvg }}</div>
                <div class="score-desc">
                  <p>好评{{ pjInfo.goodsEvRate * 100 }}%</p>
                  <Rate
                    allow-half
                    disabled
                    :value="Number(pjInfo.gradeAvg)"
                  ></Rate>
                </div>
                <div class="comment-total">
                  <div>
                    <Tag color="default">全部{{ pjInfo.evTotalCount }}</Tag>
                    <Progress
                      :percent="100"
                      :stroke-color="['#FF6E56', '#FAD126']"
                    />
                  </div>
                  <div>
                    <Tag color="default">好评{{ pjInfo.goodsEvCount }}</Tag>
                    <Progress
                      :percent="pjInfo.goodsEvRate * 100"
                      :stroke-color="['#FF6E56', '#FAD126']"
                    />
                  </div>
                  <div>
                    <Tag color="default">中评{{ pjInfo.midEvCount }}</Tag>
                    <Progress
                      :percent="pjInfo.midEvRate * 100"
                      :stroke-color="['#FF6E56', '#FAD126']"
                    />
                  </div>
                  <div>
                    <Tag color="default">差评{{ pjInfo.badEvCount }}</Tag>
                    <Progress
                      :percent="pjInfo.badEvRate * 100"
                      :stroke-color="['#FF6E56', '#FAD126']"
                    />
                  </div>
                </div>
              </div>
              <!-- 评论区 -->
              <div class="comments-row">
                <div class="reply-content">
                  <div
                    class="reply-row"
                    v-for="(item, index) in pjList"
                    :key="index"
                  >
                    <div class="author-row">
                      <img class="head-face" :src="item.evaluaterFace" alt="" />
                      <div class="author-info">
                        <span>{{ item.userName }}</span>
                        <span>{{ item.userEvaluateTime }}</span>
                      </div>
                    </div>
                    <div class="info">
                      <div class="score">
                        <span>{{ Number(item.grade) }}</span>
                        <Rate
                          allow-half
                          disabled
                          :value="Number(item.grade)"
                        ></Rate>
                      </div>
                      <div v-html="item.userEvaluate"></div>
                      <div class="reply-btn-row">
                        <div @click="goFrend(item, index)">
                          <img
                            class="comments-icon"
                            src="@/assets/base/comments.png"
                            alt=""
                          />
                          <span>{{ item.childCount }}</span>
                        </div>
                        <div>
                          <img
                            class="praise-icon"
                            src="@/assets/base/praise.png"
                            alt=""
                            @click="replyHandle(index)"
                          />
                          <span>{{ item.likes }}</span>
                        </div>
                      </div>
                      <div class="reply-list-show" v-if="item.child.length > 0">
                        <!--评论前三个-->
                        <div
                          class="reply-el"
                          v-for="(a, ind) in item.child.slice(0, 3)"
                          :key="ind"
                        >
                          <div class="author-row">
                            <img
                              class="head-face"
                              :src="a.evaluaterFace"
                              alt=""
                            />
                            <div class="author-info">
                              <span>{{ a.evname }}</span>
                              <span>{{ a.userEvaluateTime }}</span>
                            </div>
                          </div>
                          <div class="reply-info">
                            <div>
                              <span>回复</span>
                              <span class="author-name"
                                >{{ a.replyToName }}:</span
                              >
                              <span class="text" v-html="a.userEvaluate"></span>
                            </div>
                            <div class="praise">
                              <div @click="goBackClick(item, a, index, ind)">
                                回复
                              </div>
                              <div class="praise-row">
                                <img
                                  @click="addBaseZ(index, ind)"
                                  class="praise-icon"
                                  src="@/assets/base/praise.png"
                                  alt=""
                                />
                                <span>{{ a.likes }}</span>
                              </div>
                            </div>
                            <!-- 二级前三个的回复框 -->
                            <div v-if="(currentAnswerId==a.id)">
                              <Input
                                v-model="userEvaluate"
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 5 }"
                                :placeholder="'回复' + goBackObj.evname"
                              ></Input>
                              <div
                                style="text-align: right;
                                  width: 100%;
                                  padding-top: 10px;
                                "
                              >
                                <Button type="error" @click="goSubmit(ind)"
                                  >提交</Button
                                >
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- 二级隐藏的评论 -->
                        <div
                          class="reply-el"
                          v-show="!item.childMore"
                          :key="ind"
                          v-for="(a, ind) in item.child.slice(
                            3,
                            item.child.length
                          )"
                        >
                          <div class="author-row">
                            <img
                              class="head-face"
                              :src="a.evaluaterFace"
                              alt=""
                            />
                            <div class="author-info">
                              <span>{{ a.userName }}</span>
                              <span>{{ a.userEvaluateTime }}</span>
                            </div>
                          </div>
                          <div class="reply-info">
                            <div>
                              <span>回复</span>
                              <span class="author-name"
                                >{{ a.replyToName }}:</span
                              >
                              <span class="text" v-html="a.userEvaluate"></span>
                            </div>
                            <div class="praise">
                              <div
                                @click="goBackClick(item, a, index, ind + 3)"
                              >
                                回复
                              </div>
                              <div class="praise-row">
                                <img
                                  @click="addBaseZ(index, ind + 3)"
                                  class="praise-icon"
                                  src="@/assets/base/praise.png"
                                  alt=""
                                />
                                <span>{{ a.likes }}</span>
                              </div>
                            </div>
                            <!-- 二级隐藏回复 -->
                            <div v-if="(currentAnswerId==a.id)">
                              <Input
                                v-model="userEvaluate"
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 5 }"
                                :placeholder="'回复' + goBackObj.evname"
                              ></Input>
                              <div
                                style="text-align: right; width: 100%;
                                  padding-top: 10px;
                                "
                              >
                                <Button type="error" @click="goSubmit(ind + 3)"
                                  >提交</Button
                                >
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="search-all"
                          @click="goMore(index)"
                          v-if="item.child.length > 3 && item.childMore"
                        >
                          <span>查看全部回复</span>
                        </div>
                      </div>
                      <!-- 主回复 -->
                      <div class="reply-box" v-if="(currentAnswerId==item.id)">
                        <Input
                          v-model="userEvaluate"
                          type="textarea"
                          :autosize="{ minRows: 3, maxRows: 6 }"
                          :placeholder="`回复${goFrendObj.evname}:`"
                        ></Input>
                        <div
                          style="
                            text-align: right;
                            width: 100%;
                            padding-top: 10px;
                          "
                        >
                          <Button type="error" @click="goFrendSubmit(index)"
                            >提交</Button
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="search-all" v-if="!lastPage" @click="addList">
                    <span>查看更多回复</span>
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 100%; text-align: center; flex: 24px" v-else>
              暂无评论
            </div>
          </Tab-Pane>
        </Tabs>
      </div>
    </div>
    <Footer :top="20"></Footer>
    <div class="modal-content">
      <!-- 预约弹窗 -->
      <div class="appointment-modal">
        <Modal
          v-model="modal1"
          title="确认预约信息"
          @on-ok="okHandle"
          @on-cancel="cancelHandle"
          width="1000"
          style="padding: 0px 20px"
        >
          <div class="content">
            <div class="title">预约人信息</div>
            <div class="info">
              <div
                class="face"
                :style="{
                  backgroundImage: 'url(' + detailInfo.memberFace + ')',
                }"
              ></div>
              <div class="school-info">
                <div class="name">{{ detailInfo.userName }}</div>
                <div class="school-name">
                  <!--<span>{{ detailInfo.memberSite }}</span>-->
                  <span>{{ detailInfo.mobile }}</span>
                </div>
              </div>
            </div>
            <div class="title base-info-title">基地预约信息</div>
            <div class="base-info">
              <div class="base">
                <span>预约基地：</span>
                <span>{{ detailInfo.name }} {{ detailInfo.siteAddress }}</span>
              </div>
              <div class="time">
                <span>预约时段：</span>
                <span
                  v-for="(item, index) in modal1Data.timeArr"
                  :key="index"
                  style="padding-right: 10px"
                  >{{ item.timeStr }}</span
                >
              </div>
            </div>
            <!--<div class="title pay-title">支付方式</div>-->
            <!--<div class="choose-pay-way">-->
            <!--<div-->
            <!--class="wx"-->
            <!--@click="choosePayWay('wx')"-->
            <!--:style="-->
            <!--payWay == 'wx'-->
            <!--? 'border:1px solid #FD5151'-->
            <!--: 'border:1px solid transparent'-->
            <!--"-->
            <!--&gt;-->
            <!--<img src="@/assets/base/wx.png" alt="" />-->
            <!--<span>微信支付</span>-->
            <!--</div>-->
            <!--<div-->
            <!--class="zfb"-->
            <!--@click="choosePayWay('zfb')"-->
            <!--:style="-->
            <!--payWay == 'zfb'-->
            <!--? 'border:1px solid #FD5151'-->
            <!--: 'border:1px solid transparent'-->
            <!--"-->
            <!--&gt;-->
            <!--<img src="@/assets/base/zfb.png" alt="" />-->
            <!--<span>支付宝支付</span>-->
            <!--</div>-->
            <!--</div>-->
          </div>
          <div class="pay-row">
            <div class="price">
              <span v-if="detailInfo.isCharge == '1'"
                >¥ {{ detailInfo.unitPrice }}/小时</span
              >
              <span v-else>免费</span>
            </div>
            <div class="pay-btn" @click="appointHandle">立即预约</div>
          </div>
        </Modal>
      </div>

      <!-- 支付弹窗 -->
      <div class="pay-modal">
        <Modal
          v-model="modal2"
          title="返回我的预约"
          @on-ok="okHandle"
          @on-cancel="cancelHandle"
          width="1000"
        >
          <div class="pay-content">
            <p>订单提交成功，请尽快付款！订单号:240504585449</p>
            <div class="qr-code"></div>
            <span class="title">{{
              payWay == "wx" ? "微信支付" : "支付宝支付"
            }}</span>
            <span>距离二维码过期还剩59秒，过期后请刷新页面重新获取二维码</span>
            <span class="price">
              <span>应支付金额</span>
              <span>￥</span>
              <span>80.00</span>
            </span>
            <div class="prompt">
              <img src="@/assets/base/saoma.png" alt="" />
              <div class="prompt-text">
                <span
                  >请使用{{ payWay == "wx" ? "微信" : "支付宝" }}扫一扫</span
                >
                <span>扫一扫二维码支付</span>
              </div>
            </div>
            <div class="choose-back" @click="modalHandle">
              <img src="@/assets/base/back.png" alt="" />
              <span>选择其他支付方式</span>
            </div>
          </div>
        </Modal>
      </div>

      <!-- 支付成功弹窗 -->
      <div class="success">
        <Modal
          v-model="modal3"
          title=""
          @on-ok="okHandle"
          @on-cancel="cancelHandle"
          width="1000"
        >
          <div class="success-content">
            <img src="@/assets/base/success.png" alt="" />
            <span class="success-title">预约成功!</span>
            <span class="id">订单编号：{{ modelData.sn }}</span>
            <span v-if="modelData.price" class="pay-way">{{ paymentMethod == "ALIPAY" ? "支付宝支付" : "微信支付" }}:{{modelData.price}}元</span>
            <span v-else>免费</span>
            <span class="search-detail" @click="searchDetail"
              >查看预约详情</span
            >
            <div class="back-home" @click="goBackFirst">返回实训首页</div>
          </div>
        </Modal>
      </div>

      <ModalDetail
        :modalInfoShow="modal4"
        :modelInfo="modelData"
        @modalHandle="modalHandle"
      ></ModalDetail>
    </div>
    <payModal></payModal>
  </div>
</template>
<script>
import payModal from "@/components/pay/index.vue";
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import Footer from "@/components/footer/my_footer.vue";
import Comment from "@/components/course/comment.vue";
import ModalDetail from "./detailModal.vue";
import bus from "@/libs/bus.js";
import { toCollect } from "@/api/course";
import {
  getBaseTypeList,
  getBaseInfoId,
  getBaseContInfo,
  getBaseContPage,
  getBaseChildTextId,
  setBaseUserTrue,
  setBaseUserPlz,
  baseappointmentDetails
} from "@/api/yk_record";
export default {
  data() {
    return {
      userEvaluate:"",//评论输入框
      name: "概览",
      isDisabled: false, // 是否允许预约
      dateList: [],
      //日期选中的下标
      current: 0,
      timeList: [],
      rateScore: 4.8,
      courseData: {}, //课程数据，后期本地取
      //   模拟数据
      replyVal: "",
      modal1: false,
      //支付方式
      payWay: "wx",
      modal2: false,
      modal3: false,
      modal4: false,
      queryId: "",
      detailInfo: {},
      baseTypeList: [],
      pjInfo: {},
      page: {
        page: "1",
        rows: "5",
        trainingBaseId: "",
      },
      pjList: [],
      pjListObj: {},
      lastPage: false,
      goBackObj: {},
      itemObj: {},
      selDay: {},
      daySel: "",
      modal1Data: {
        timeArr: [],
      },
      modelData: {},
      mdStatus: false,
      goFrendShow: false,
      goFrendInput: "",
      goFrendObj: {},
      childMore: false,
      currentAnswerId:null,//输入框弹框 唯一值
    };
  },
  mounted() {
    bus.$on("payStatus", (val) => {
      if (val) {
        this.$Message.success("预约成功");
        this.modelData =Object.assign(this.modelData,val) ;
        this.modal1 = false;
        this.modal3 = true;
      }
    });
    this.queryId = this.$route.query.id;
    this.name = decodeURIComponent(this.$route.query.tab);
    this.isDisabled = eval(this.$route.query.disabled);
    this.getTypeData();
    this.getInfoData();
    this.getPjData();
    this.getPjPageList();
  },
  methods: {
    //主回复
    goFrend(item, index) {
      this.userEvaluate=''
      this.currentAnswerId= this.currentAnswerId==item.id?null:item.id
      this.goFrendObj = item;
      this.pjList[index].goFrendShow =  this.pjList[index].goFrendShow?false: true;
      this.pjList[index].goFrendInput = "";
    },
    //主回复提交
    goFrendSubmit() {
      let params = {
        baseId: this.goFrendObj.baseId,
        evaluateType: "1",
        pid: this.goFrendObj.id,
        userEvaluate: this.userEvaluate,
      };
      getBaseChildTextId(params).then((res) => {
        if (res.code == "200") {
          this.$Message.success("回复成功!");
          this.goFrendShow = false;
          this.getPjPageList();
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    //收藏
    setMdStatus() {
      let params = {
        relationId: this.queryId,
        typeId: "1002002",
      };
      toCollect(params).then((res) => {
        if (res.code == "200") {
          this.$Message.success(`${this.mdStatus ? "取消收藏" : "收藏"}成功!`);
          this.mdStatus = !this.mdStatus;
        } else {
          this.$Message.error(res.message || "收藏失败!");
        }
      });
    },
    //回复子评论
    goSubmit(ind) {
      let params = {
        baseId: this.itemObj.baseId,
        evaluateType: "1",
        pid: this.goBackObj.id,
        userEvaluate: this.userEvaluate,
      };
      getBaseChildTextId(params).then((res) => {
        if (res.code == "200") {
          this.$Message.success("回复成功!");
          this.getPjPageList();
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    //显示回复子评论窗口
    goBackClick(item, a, index, ind) {
      this.userEvaluate=''
      this.currentAnswerId= this.currentAnswerId==a.id?null:a.id
      this.pjList[index].child[ind].inputValue = "";
      this.itemObj = item;
      this.goBackObj = a;
    },
    goBackFirst() {
      this.$router.push({
        path: "/base",
      });
    },
    //更多子评论
    goMore(index) {
      this.pjList[index].childMore = false;
    },
    //更多评论
    addList() {
      if (this.pjListObj.current != this.pjListObj.pages) {
        this.page.rows = this.page.rows + 5;
        this.getPjPageList();
        this.lastPage = false;
      } else {
        this.lastPage = true;
      }
    },
    //获取评论分页
    getPjPageList() {
      this.page.trainingBaseId = this.queryId;
      getBaseContPage(this.page).then((res) => {
        if (res.code == "200") {
          this.userEvaluate=''
          this.currentAnswerId=null
          let data = res.result.records;
          data.forEach((item) => {
            item.goFrendShow = false;
            item.goFrendInput = "";
            if (item.child.length > 3) {
              item.childMore = true;
            } else {
              item.childMore = false;
            }
            item.child.forEach((a) => {
              a.inputShow = false;
              a.inputValue = "";
            });
          });
          this.pjList = res.result.records;
          this.pjListObj = res.result;
          //判定最后一条
          if (this.pjListObj.current == this.pjListObj.pages) {
            this.lastPage = true;
          }
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    //获取评论基本信息
    getPjData() {
      getBaseContInfo(this.queryId).then((res) => {
        if (res.code == "200") {
          this.pjInfo = res.result;
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    //获取基地类型list
    getTypeData() {
      getBaseTypeList().then((res) => {
        if (res.code == "200") {
          this.baseTypeList = res.result;
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    //获取
    getInfoData() {
      getBaseInfoId(this.queryId).then((res) => {
        if (res.code == "200") {
          this.detailInfo = res.result;
          console.log(this.detailInfo, "pc基地数据");
          this.dateList = res.result.trainingBaseDayWeekVOS;
          let newDateList = this.dateList.filter((a) => {
            return a.enable == "1";
          });
          this.selDay = newDateList[0];
          this.daySel = newDateList[0].dateMonthDay;
          newDateList[0].trainingBaseTimeVOS.forEach((item) => {
            this.timeList.push({
              ...item,
              checked: false,
            });
          });
          this.mdStatus = this.detailInfo.isCollect == "1" ? true : false;
          this.detailInfo.typeName = this.baseTypeList.filter(
            (item) => item.id == this.detailInfo.type
          )[0].name;
          let arr = this.detailInfo.picUrls.split(",");
          this.detailInfo.imgList = arr.length > 3 ? arr.slice(1, 4) : arr;
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    changeTable(name) {
      this.name = name;
    },
    //改变选中的日期
    changeCurrent(item) {
      this.selDay = item;
      this.timeList = [];
      let arr = this.dateList.filter((a) => {
        return a.week == item.week;
      })[0].trainingBaseTimeVOS;
      arr.forEach((item) => {
        this.timeList.push({
          ...item,
          checked: false,
        });
      });
    },
    //选择时间段
    chooseTime(item, index) {
      this.timeList.forEach((a) => {
        if (item.id == a.id) {
          a.checked = !item.checked ? true : false;
        }
      });
    },
    //点赞
    replyHandle(index) {
      this.setHand(this.pjList[index].id, index);
    },
    addBaseZ(index, ind) {
      this.setHand(this.pjList[index].child[ind].id,index, ind);
    },
    setHand(id, index, ind) {
      let params = {
        id: id,
        evaluateOperType: "0",
      };
      setBaseUserPlz(params).then((res) => {
        if (res.code == "200") {
          if (ind==0||ind) {
            console.log(index,ind);
            this.pjList[index].child[ind].likes =
              Number(this.pjList[index].child[ind].likes) + 1;
          } else {
            this.pjList[index].likes = Number(this.pjList[index].likes) + 1;
          }
          this.$Message.success(" 点赞成功!");
        } else {
          this.$Message.error(res.message || "点赞失败!");
        }
      });
    },
    //提交预约
    appointmentHandle() {
      let newTimeSel = this.timeList.filter((item) => {
        return item.checked;
      });
      let arr = [];
      newTimeSel.forEach((item) => {
        arr.push({
          timeStr: this.selDay.dateMonthDay + "：" + item.timeSlot,
          orderDate: this.selDay.dateFull,
          timeSlot: item.timeSlot,
          id: item.id,
        });
      });
      this.modal1Data.timeArr = arr;
      this.modal1 = true;
    },
    okHandle() {},
    cancelHandle() {},

    //选择支付方式
    choosePayWay(way) {
      this.payWay = way;
    },
    //立即预约
    appointHandle() {
      let arr = this.modal1Data.timeArr;
      arr.forEach((item) => {
        delete item.timeStr;
      });
      let params = {
        trainingBaseId: this.detailInfo.id,
        trainingBaseTimeVO: arr || [],
      };
      setBaseUserTrue(params).then((res) => {
        if (res.code == "200") {
          this.modelData = res.result;
          this.modelData.timeArr =
              res.result.trainingBaseTimeStr.split(",") || [];
          if (this.detailInfo.isCharge == "1") {
            bus.$emit("openPayModal", {
              orderType: "TRAINING_BASE_BOOKING",
              sn: res.result.sn,
            });
          } else {
            //免费的
            this.$Message.success("预约成功");
         
            this.modal1 = false;
            this.modal3 = true;
          }
        } else {
          this.$Message.error(res.message || "预约失败!");
        }
      });
    },

    //返回选择支付方式
    // modalHandle() {
    //   this.modal2 = false;
    //   this.modal1 = true;
    // },
    //查看预约详情
    searchDetail() {
      baseappointmentDetails(this.modelData.sn).then(res=>{
        if(res.success){
          this.modelData.createTime=res.result.order.createTime
          this.modelData.paymentTime=res.result.order.paymentTime
          this.modelData.paymentMethod=res.result.order.paymentMethod
           this.modal4 = true;
      this.modal3 = false;
        }else{
          this.$Message.error(res.message)
        }
      })
     
    },
    //改变详情弹窗的显示
    modalHandle() {
      this.modal4 = false;
    },
  },
  components: {
    MenuLocation,
    Footer,
    Comment,
    ModalDetail,
    payModal,
  },
};
</script>
<style lang="scss" scoped>
.detail {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  position: relative;
  .detail-content {
    padding: 0px calc(260 / 1920 * 100vw);
    .detail-head {
      background: #fff;
      padding: calc(30 / 1920 * 100vw) calc(40 / 1920 * 100vw);
      border-radius: calc(10 / 1920 * 100vw);
      display: flex;
      justify-content: space-between;
      .left-img {
        width: calc(538 / 1920 * 100vw);
        height: calc(330 / 1920 * 100vw);
        border-radius: calc(10 / 1920 * 100vw);
        background-size: cover;
      }
      .center-img {
        height: calc(330 / 1920 * 100vw);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .img-el {
          width: calc(186 / 1920 * 100vw);
          height: calc(100 / 1920 * 100vw);
          border-radius: calc(10 / 1920 * 100vw);
          background-size: cover;
        }
        .center-img {
          height: calc(330 / 1920 * 100vw);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .img-el {
            width: calc(186 / 1920 * 100vw);
            height: calc(100 / 1920 * 100vw);
            border-radius: calc(10 / 1920 * 100vw);
            background-size: cover;
          }
        }
        .map {
          width: calc(556 / 1920 * 100vw);
          .name-row {
            display: flex;
            align-items: center;
            .label {
              width: calc(63 / 1920 * 150vw);
              height: calc(27 / 1920 * 100vw);
              background: #fc9867;
              border-radius: calc(4 / 1920 * 100vw);
              text-align: center;
              line-height: calc(27 / 1920 * 100vw);
              font-size: calc(14 / 1920 * 100vw);
              color: #fff;
            }
            > span {
              color: #151515;
              font-size: calc(24 / 1920 * 100vw);
              margin-left: calc(9 / 1920 * 100vw);
            }
          }
          .base-phone-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: calc(16 / 1920 * 100vw);
            .phone {
              display: flex;
              align-items: center;
              font-size: calc(14 / 1920 * 100vw);
              .phone-label {
                color: #999999;
              }
              .phone-icon {
                width: calc(17 / 1920 * 100vw);
                height: calc(17 / 1920 * 100vw);
                margin-left: calc(12 / 1920 * 100vw);
              }
              .num {
                margin-left: calc(4 / 1920 * 100vw);
              }
            }
            .collect {
              display: flex;
              align-items: center;
              cursor: pointer;
              user-select: none;
              > span {
                color: #a1a1a1;
                font-size: calc(16 / 1920 * 100vw);
                margin-left: calc(4 / 1920 * 100vw);
              }
            }
          }
          .score-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: calc(16 / 1920 * 100vw);
            .label-list {
              display: flex;
              .label {
                width: calc(60 / 1920 * 100vw);
                height: calc(28 / 1920 * 100vw);
                background: #ffedee;
                text-align: center;
                line-height: calc(28 / 1920 * 100vw);
                color: #f3343d;
                font-size: calc(14 / 1920 * 100vw);
                border-radius: calc(4 / 1920 * 100vw);
                margin-left: calc(4 / 1920 * 100vw);
              }
            }
            .score-el {
              display: flex;
              align-items: center;
              color: #faad39;
              > span:first-of-type {
                font-size: calc(20 / 1920 * 100vw);
                font-weight: bold;
              }
              > span:last-of-type {
                font-size: calc(14 / 1920 * 100vw);
                margin-left: calc(2 / 1920 * 100vw);
              }
              .collect-icon {
                width: calc(18 / 1920 * 100vw);
                height: calc(17 / 1920 * 100vw);
                margin-left: calc(4 / 1920 * 100vw);
              }
            }
          }
          .location-info-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: calc(30 / 1920 * 100vw);
            .location-info {
              display: flex;
              align-items: center;
              .location-icon {
                width: calc(11 / 1920 * 100vw);
                height: calc(14 / 1920 * 100vw);
              }
              > span {
                margin-left: calc(4 / 1920 * 100vw);
                color: #176eff;
                font-size: calc(14 / 1920 * 100vw);
              }
            }
            .to-view {
              color: #176eff;
              font-size: calc(14 / 1920 * 100vw);
              border-bottom: 1px solid #176eff;
            }
          }
          .map-show {
            width: calc(556 / 1920 * 100vw);
            height: calc(150 / 1920 * 100vw);
            border: 1px solid red;
            border-radius: calc(10 / 1920 * 100vw);
            margin-top: calc(6 / 1920 * 100vw);
          }
        }
      }
      .map {
        width: calc(556 / 1920 * 100vw);
        .name-row {
          display: flex;
          align-items: center;
          .label {
            width: calc(63 / 1920 * 150vw);
            height: calc(27 / 1920 * 100vw);
            background: #fc9867;
            border-radius: calc(4 / 1920 * 100vw);
            text-align: center;
            line-height: calc(27 / 1920 * 100vw);
            font-size: calc(14 / 1920 * 100vw);
            color: #fff;
          }
          > span {
            color: #151515;
            font-size: calc(24 / 1920 * 100vw);
            margin-left: calc(9 / 1920 * 100vw);
          }
        }
        .base-phone-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: calc(16 / 1920 * 100vw);
          .phone {
            display: flex;
            align-items: center;
            font-size: calc(14 / 1920 * 100vw);
            .phone-label {
              color: #999999;
            }
            .phone-icon {
              width: calc(17 / 1920 * 100vw);
              height: calc(17 / 1920 * 100vw);
              margin-left: calc(12 / 1920 * 100vw);
            }
            .num {
              margin-left: calc(4 / 1920 * 100vw);
            }
          }
          .collect {
            display: flex;
            align-items: center;
            .collect-icon {
              width: calc(20 / 1920 * 100vw);
              height: calc(19 / 1920 * 100vw);
            }
            > span {
              color: #a1a1a1;
              font-size: calc(16 / 1920 * 100vw);
              margin-left: calc(4 / 1920 * 100vw);
            }
          }
        }
        .score-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: calc(16 / 1920 * 100vw);
          .label-list {
            display: flex;
            .label {
              width: calc(60 / 1920 * 100vw);
              height: calc(28 / 1920 * 100vw);
              background: #ffedee;
              text-align: center;
              line-height: calc(28 / 1920 * 100vw);
              color: #f3343d;
              font-size: calc(14 / 1920 * 100vw);
              border-radius: calc(4 / 1920 * 100vw);
              margin-left: calc(4 / 1920 * 100vw);
            }
          }
          .score-el {
            display: flex;
            align-items: center;
            color: #faad39;
            > span:first-of-type {
              font-size: calc(20 / 1920 * 100vw);
              font-weight: bold;
            }
            > span:last-of-type {
              font-size: calc(14 / 1920 * 100vw);
              margin-left: calc(2 / 1920 * 100vw);
            }
            .collect-icon {
              width: calc(18 / 1920 * 100vw);
              height: calc(17 / 1920 * 100vw);
              margin-left: calc(4 / 1920 * 100vw);
            }
          }
        }
        .location-info-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: calc(30 / 1920 * 100vw);
          .location-info {
            display: flex;
            align-items: center;
            .location-icon {
              width: calc(11 / 1920 * 100vw);
              height: calc(14 / 1920 * 100vw);
            }
            > span {
              margin-left: calc(4 / 1920 * 100vw);
              color: #176eff;
              font-size: calc(14 / 1920 * 100vw);
            }
          }
          .to-view {
            color: #176eff;
            font-size: calc(14 / 1920 * 100vw);
            border-bottom: 1px solid #176eff;
          }
        }
        .map-show {
          width: calc(556 / 1920 * 100vw);
          height: calc(150 / 1920 * 100vw);
          border: 1px solid red;
          border-radius: calc(10 / 1920 * 100vw);
          margin-top: calc(6 / 1920 * 100vw);
        }
      }
    }
    .detail-tabs {
      padding: 0px calc(38 / 1920 * 100vw) calc(56 / 1920 * 100vw);
      background: #fff;
      border-radius: calc(10 / 1920 * 100vw);
      margin-top: calc(20 / 1920 * 100vw);
      position: relative;
      .label {
        width: calc(70 / 1920 * 100vw);
        height: calc(30 / 1920 * 100vw);
        background-image: url("../../assets/base/titleBg.png");
        background-size: cover;
        font-size: calc(14 / 1920 * 100vw);
        color: #fff;
        text-align: center;
        line-height: calc(30 / 1920 * 100vw);
        position: absolute;
        left: 0;
        top: calc(83 / 1920 * 100vw);
      }
      .appointment {
        padding: 0px calc(30 / 1920 * 100vw);
        display: flex;
        flex-direction: column;
        align-items: center;
        .date {
          display: flex;
          .current-date {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: calc(78 / 1920 * 100vw);
            height: calc(58 / 1920 * 100vw);
            margin-left: calc(20 / 1920 * 100vw);
            cursor: pointer;
          }
          .current-date:first-of-type {
            margin-left: calc(0 / 1920 * 100vw);
          }
        }
        .line {
          width: 100%;
          height: calc(8 / 1920 * 100vw);
          background: #f1f1f1;
        }
        .time-list {
          display: flex;
          flex-wrap: wrap;
          margin-top: calc(15 / 1920 * 100vw);
          position: relative;
          .time-el {
            width: calc(380 / 1920 * 100vw);
            height: calc(74 / 1920 * 100vw);
            border: 1px solid #e3e3e3;
            border-radius: calc(5 / 1920 * 100vw);
            position: relative;
            display: flex;
            align-items: center;
            margin: 0 10px 10px 0;
            .clock {
              width: calc(21 / 1920 * 100vw);
              height: calc(21 / 1920 * 100vw);
              margin-left: calc(19 / 1920 * 100vw);
            }
            > span {
              margin-left: calc(33 / 1920 * 100vw);
            }
            .choose-icon {
              width: calc(33 / 1920 * 100vw);
              height: calc(33 / 1920 * 100vw);
              position: absolute;
              right: 0;
              bottom: 0;
              cursor: pointer;
            }
          }
        }
        .price {
          margin-left: auto;
          display: flex;
          align-items: center;
          margin-top: calc(60 / 1920 * 100vw);
          > span {
            color: #fd5151;
            font-weight: bold;
            font-size: calc(18 / 1920 * 100vw);
          }
          .submit-btn {
            width: calc(160 / 1920 * 100vw);
            height: calc(48 / 1920 * 100vw);
            background: #fd5151;
            color: #fff;
            text-align: center;
            line-height: calc(48 / 1920 * 100vw);
            font-size: calc(18 / 1920 * 100vw);
            margin-left: calc(22 / 1920 * 100vw);
            border-radius: calc(4 / 1920 * 100vw);
            cursor: pointer;
          }
        }
      }
    }
  }
}
//copy 龙洋洋
.detail-study-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: calc(113 / 1920 * 100vw);
  background: #ffffff;
  box-shadow: 0px calc(4 / 1920 * 100vw) calc(16 / 1920 * 100vw) 0px
    rgba(234, 234, 234, 0.78);
  border-radius: calc(10 / 1920 * 100vw);
  .course-title {
    font-size: calc(18 / 1920 * 100vw);
    font-family: "PingFang SC";
    font-weight: 500;
    color: #3e3d3d;
    line-height: calc(24 / 1920 * 100vw);
  }
  .course-price {
    font-size: calc(32 / 1920 * 100vw);
    font-family: "PingFang SC";
    font-weight: bold;
    color: #ffab60;
    line-height: calc(24 / 1920 * 100vw);
  }
}
// 课程评论
.course-comment {
  width: 100%;
  min-height: calc(475 / 1920 * 100vw);
  padding: 0 calc(172 / 1920 * 100vw) calc(15 / 1920 * 100vw);
  background: #ffffff;
  // box-shadow: 0px 4px 16px 0px rgba(234, 234, 234, 0.78);
  // border-radius: 10px;
  .course-comment-top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: calc(150 / 1920 * 100vw);
    .score {
      font-size: calc(60 / 1920 * 100vw);
      font-weight: bold;
      color: #181818;
      line-height: calc(52 / 1920 * 100vw);
      margin-right: calc(5 / 1920 * 100vw);
    }
    .score-desc {
      margin-right: calc(46 / 1920 * 100vw);
      .collect-icon {
        width: calc(15 / 1920 * 100vw);
        height: calc(15 / 1920 * 100vw);
        margin-left: calc(4 / 1920 * 100vw);
      }
    }
    // 评论统计
    .comment-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      flex: 1;
      > div {
        display: flex;
        align-items: center;
        width: 50%;
        // 标签样式
        .ivu-tag {
          width: calc(80 / 1920 * 100vw);
          height: calc(26 / 1920 * 100vw);
          background: #f0f0f0;
          border-radius: calc(4 / 1920 * 100vw);
          box-sizing: content-box;
          line-height: calc(28 / 1920 * 100vw);
          text-align: center;
          margin-right: calc(10 / 1920 * 100vw);
        }
      }
    }
  }
}

//评论内容
.comments-row {
  .reply-content {
    border-radius: calc(4 / 1920 * 100vw);
    display: flex;
    flex-direction: column;
    .reply-row {
      display: flex;
      margin-bottom: 10px;
      background: #f9f9f9;
      padding: 10px 20px;
      border-radius: 4px;
      .author-row {
        height: calc(60 / 1920 * 100vw);
        display: flex;
        align-items: center;
        .head-face {
          width: calc(60 / 1920 * 100vw);
          height: calc(60 / 1920 * 100vw);
          border-radius: 100%;
          overflow: hidden;
          background-color: #cccccc;
        }
        .author-info {
          display: flex;
          flex-direction: column;
          margin-left: calc(15 / 1920 * 100vw);
          > span:first-of-type {
            font-size: calc(16 / 1920 * 100vw);
          }
          > span:last-of-type {
            color: #cbcbcb;
            font-size: calc(12 / 1920 * 100vw);
          }
        }
      }
      .info {
        display: flex;
        flex-direction: column;
        margin-left: calc(60 / 1920 * 100vw);
        flex: 1;
        .score {
          > span {
            color: #070a0c;
            font-size: calc(16 / 1920 * 100vw);
          }
          .collect-icon {
            width: calc(12 / 1920 * 100vw);
            height: calc(12 / 1920 * 100vw);
            margin-left: calc(4 / 1920 * 100vw);
          }
        }
        > span {
          display: block;
          margin-top: calc(18 / 1920 * 100vw);
        }
        .img-list {
          margin-top: calc(20 / 1920 * 100vw);
          display: flex;
          flex-wrap: wrap;
          .img-el {
            width: calc(100 / 1920 * 100vw);
            height: calc(70 / 1920 * 100vw);
            border: 1px solid red;
            margin-left: calc(10 / 1920 * 100vw);
          }
          .img-el:first-of-type {
            margin-left: 0;
          }
        }
        .reply-btn-row {
          cursor: pointer;
          margin-left: auto;
          display: flex;
          justify-content: flex-end;
          margin-top: calc(8 / 1920 * 100vw);
          > div {
            display: flex;
            align-items: center;
            color: #9d9d9d;
            font-size: calc(14 / 1920 * 100vw);
            .comments-icon {
              width: calc(14 / 1920 * 100vw);
              height: calc(14 / 1920 * 100vw);
            }
            .praise-icon {
              width: calc(15 / 1920 * 100vw);
              height: calc(15 / 1920 * 100vw);
            }
            > span {
              margin-left: calc(4 / 1920 * 100vw);
            }
          }
          > div:last-of-type {
            margin-left: calc(15 / 1920 * 100vw);
          }
        }
        .search-all {
          color: #176eff;
          display: flex;
          justify-content: center;
          margin-top: calc(13 / 1920 * 100vw);
          > span {
            cursor: pointer;
          }
        }
        .reply-list-show {
          background: #fff;
          padding: 0 calc(20 / 1920 * 100vw) calc(20 / 1920 * 100vw);
          margin: 12px 10px;
          border-radius: calc(10 / 1920 * 100vw);
          .reply-el {
            display: flex;
            padding: calc(20 / 1920 * 100vw) 0px calc(10 / 1920 * 100vw);
            border-bottom: 1px solid #e3e3e3;
            justify-content: space-between;
            .author-row {
              .head-face {
                width: calc(40 / 1920 * 100vw);
                height: calc(40 / 1920 * 100vw);
                border-radius: 50%;
                overflow: hidden;
                background-color: #cccccc;
              }
              .author-info {
                margin-left: calc(9 / 1920 * 100vw);
                > span:first-of-type {
                  font-size: calc(14 / 1920 * 100vw);
                }
                > span:last-of-type {
                  font-size: calc(12 / 1920 * 100vw);
                  color: #cbcbcb;
                }
              }
            }
            .reply-info {
              font-size: calc(14 / 1920 * 100vw);
              width: 76%;
              display: flex;
              flex-direction: column;
              > div {
                margin-top: calc(8 / 1920 * 100vw);
                > span {
                  color: #070a0c;
                }
                .author-name {
                  color: #999999;
                }
                .text {
                  margin-left: calc(8 / 1920 * 100vw);
                }
              }

              .praise {
                cursor: pointer;
                display: flex;
                margin-left: auto;
                margin-top: calc(12 / 1920 * 100vw);
                color: #999999;
                font-size: calc(14 / 1920 * 100vw);
                > span {
                  color: #999999;
                }
                .praise-row {
                  display: flex;
                  align-items: center;
                  margin-left: calc(12 / 1920 * 100vw);
                  .praise-icon {
                    width: calc(15 / 1920 * 100vw);
                    width: calc(15 / 1920 * 100vw);
                    margin-right: calc(4 / 1920 * 100vw);
                  }
                }
              }
            }
          }
        }
        .reply-input {
          margin-top: calc(20 / 1920 * 100vw);
          display: flex;
          flex-direction: column;
          .submit-btn {
            margin-left: auto;
            margin-top: calc(20 / 1920 * 100vw);
            width: calc(110 / 1920 * 100vw);
            height: calc(48 / 1920 * 100vw) !important;
            text-align: center;
            line-height: calc(48 / 1920 * 100vw);
            background: #fd5151;
            font-size: calc(18 / 1920 * 100vw);
            color: #fff;
            cursor: pointer;
            border-radius: calc(4 / 1920 * 100vw);
          }
        }
      }
    }
  }
}

//预约弹窗
:deep(.ivu-modal-body) {
  padding: 16px 40px;
}
.content {
  padding: 20px 30px !important;
  border: 1px solid #e3e3e3 !important;
  border-radius: 4px;
  .title {
    padding-bottom: 15px;
    border-bottom: 1px solid #e3e3e3;
    font-size: 14px;
    color: #333333;
  }
  .info {
    display: flex;
    align-items: center;
    margin-top: 30px;
    .face {
      width: 40px;
      height: 40px;
      border: 1px solid #e3e3e3;
      border-radius: 100%;
      background-size: cover;
    }
    .school-info {
      margin-left: 20px;
      .name {
        color: #333333;
        font-size: calc(14 / 1920 * 100vw);
      }
      .school-name {
        color: #999999;
        font-size: 12px;
        > span:last-of-type {
          /*margin-left: 20px;*/
        }
      }
    }
  }
  .base-info-title {
    margin-top: 20px;
  }
  .base-info {
    margin-top: 20px;
    .base,
    .time {
      > span:first-of-type {
        color: #999999;
        font-size: 14px;
      }
    }
    .time {
      margin-top: 15px;
    }
  }
  .pay-title {
    margin-top: 20px;
  }
  .choose-pay-way {
    display: flex;
    margin-top: 20px;
    .wx {
      width: 240px;
      height: 42px;
      background: #f5f5f5;
      border-radius: 4px;
      display: flex;
      align-items: center;
      cursor: pointer;
      > img {
        width: 19px;
        height: 16px;
        margin-left: 20px;
      }
      > span {
        font-size: 14px;
        margin-left: 20px;
      }
    }
    .zfb {
      width: 240px;
      height: 42px;
      background: #f5f5f5;
      border-radius: 4px;
      display: flex;
      align-items: center;
      margin-left: 20px;
      cursor: pointer;
      > img {
        width: 18px;
        height: 16px;
        margin-left: 20px;
      }
      > span {
        font-size: 14px;
        margin-left: 20px;
      }
    }
  }
}
.pay-row {
  display: flex;
  align-items: center;
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  .price {
    color: #fd5151;
    font-weight: bold;
    > span:first-of-type {
      font-size: 14px;
    }
    > span:last-of-type {
      font-size: 18px;
    }
  }
  .pay-btn {
    width: 160px;
    height: 48px;
    background: #fd5151;
    font-size: 18px;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    line-height: 48px;
    margin-left: 22px;
    cursor: pointer;
  }
}

//支付弹窗
.pay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  > p {
    text-align: center;
  }
  .qr-code {
    width: 245px;
    height: 245px;
    border: 1px solid red;
    margin-top: 17px;
  }
  .title {
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    margin-top: 8px;
  }
  .price {
    > span:nth-of-type(2) {
      font-size: 14px;
      font-weight: bold;
      color: #fd5151;
      margin-left: 8px;
    }
    > span:nth-of-type(3) {
      font-size: 22px;
      font-weight: bold;
      color: #fd5151;
    }
  }
  .prompt {
    width: 280px;
    height: 56px;
    background: #fd5151;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    > img {
      width: 34px;
      height: 33px;
    }
    .prompt-text {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      color: #fff;
      margin-left: 16px;
    }
  }
  .choose-back {
    display: flex;
    align-items: center;
    margin-top: 55px;
    cursor: pointer;
    > img {
      width: 8px;
      height: 13px;
    }
    > span {
      color: #176eff;
      margin-left: 6px;
    }
  }
}

//支付成功弹窗
.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 140px;
  > img {
    width: 82px;
    height: 82px;
    margin-top: 120px;
  }
  .success-title {
    font-size: 32px;
    margin-top: 14px;
  }
  .id {
    margin-top: 14px;
  }
  .pay-way {
    margin-top: 14px;
  }
  .search-detail {
    margin-top: 14px;
    color: #176eff;
    cursor: pointer;
  }
  .back-home {
    width: 280px;
    height: 46px;
    border: 1px solid #fd5151;
    border-radius: 23px;
    color: #fd5151;
    text-align: center;
    line-height: 46px;
    cursor: pointer;
    margin-top: 14px;
  }
}

// 评论列表

::v-deep .ivu-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(135 / 1920 * 100vw);
  padding: 0 calc(56 / 1920 * 100vw);
  background: #f9f9f9;
  border: none;
  margin-bottom: calc(15 / 1920 * 100vw);
  border-radius: calc(4 / 1920 * 100vw);
  box-sizing: border-box;
  .ivu-list-item-main {
    display: flex;
    align-items: center;
    flex: auto;
    .ivu-list-item-meta {
      margin-bottom: 0;
      .ivu-avatar {
        width: calc(60 / 1920 * 100vw);
        height: calc(60 / 1920 * 100vw);
      }
      .ivu-list-item-meta-title {
        font-size: 16px;
        font-family: "Source Han Sans SC";
        font-weight: 400;
        color: #070a0c;
        line-height: calc(24 / 1920 * 100vw);
      }
      .ivu-list-item-meta-description {
        font-size: calc(12 / 1920 * 100vw);
        font-family: "Source Han Sans SC";
        font-weight: 400;
        color: #cbcbcb;
        line-height: calc(24 / 1920 * 100vw);
      }
    }
  }
  .ivu-list-item-extra {
    flex: 100;
  }
}

//ui库样式修改
:deep(.ivu-tabs-nav-scroll) {
  height: calc(62 / 1920 * 100vw);
}
:deep(.ivu-tabs-tab) {
  height: calc(62 / 1920 * 100vw);
  line-height: calc(62 / 1920 * 100vw);
  padding: 0px 16px;
  font-size: calc(18 / 1920 * 100vw);
}
:deep(.ivu-tabs-tab:hover) {
  color: #fd5151;
}
:deep(.ivu-tabs-bar) {
  margin-bottom: calc(70 / 1920 * 100vw);
}
:deep(.ivu-list-item) {
  align-items: none;
}
:deep(.ivu-input) {
  height: calc(100 / 1920 * 100vw) !important;
}
:deep(.ivu-modal-header) {
  border: none;
}
:deep(.ivu-modal-footer) {
  display: none;
}
.search-all {
  color: #176eff;
  display: flex;
  justify-content: center;
  margin-top: calc(13 / 1920 * 100vw);
  > span {
    cursor: pointer;
  }
}

.reply-btn {
  cursor: pointer;
}
.noActive {
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  z-index: 99;
}
</style>

<style lang="less">
.baseDetail .ivu-radio-group-button .ivu-radio-wrapper {
  height: inherit;
  line-height: inherit;
  padding: 3px 15px;
}
.baseDetail .ivu-radio {
  display: none;
}
</style>
